<template>
	<view class="full-container">
		<custom-nav title="智能表单"></custom-nav>
		<view @touchmove.prevent>
			<diy-navTab
				:activeTab="active"
				:tabList="tabList"
				@change="changeTab"
			></diy-navTab>
			<view
				class="top-fix"
				v-if="active === 3"
				:style="'top: calc(' + navHeight + 'px + 100rpx)'"
			>
				<serach-button
					:placeholder="'请输入表单名称'"
					show-serach="true"
					@serachInput="serachInput"
				></serach-button>
			</view>
			<view class="pt100">
				<scroll-view
					scroll-y="true"
					class="content content1"
					lower-threshold="10"
					@scrolltolower="loadMore(1)"
					v-show="active === 1"
				>
					<view
						class="container pt20 df flex-between mb20 flex-container"
					>
						<view
							v-for="(item, index) in dataAllformList"
							:key="index"
							class="border-d border-r-10 mb20 pb10 pr10 pl10 item"
							@click="clickOnFormItem(item)"
						>
							<view class="text-over info-color tl">{{
								item.name
							}}</view>
							<view class="pic">
								<view
									class="label tl"
									v-for="label in item.labels.slice(0, 3)"
									:key="label"
									>‧{{ label }}</view
								>
							</view>
						</view>
					</view>
					<diy-empty v-if="dataAllformList.length === 0"></diy-empty>
				</scroll-view>
				<scroll-view
					scroll-y="true"
					class="content content2"
					lower-threshold="10"
					@scrolltolower="loadMore(2)"
					v-show="active === 2"
				>
					<view class="sp-line"></view>
					<view
						v-for="(item, index) in dataFillRecordList"
						:key="index"
						class="pt20 pb20 pl20 pr20 mt20 mb20 ml20 mr20 backf"
						@click="clickOnFillRecordItem(item)"
					>
						<view class="df flex-between mb-20">
							<view class="g3 fwb f30 record-title">{{
								item.name
							}}</view>
							<view class="primary-color f30">查看></view>
						</view>
						<view class="mt10 info-color f24"
							>关联审批流程: {{ item.processName || '-' }}</view
						>
						<view class="mt10 info-color f24"
							>审批流程状态:
							{{ item.processStatusName || '-' }}</view
						>
						<view class="mt10 info-color f24"
							>提交时间:
							{{ item.submitTime.replace('T', ' ') }}</view
						>
					</view>
					<diy-empty
						v-if="dataFillRecordList.length === 0"
					></diy-empty>
				</scroll-view>
				<scroll-view
					scroll-y="true"
					class="content content3"
					lower-threshold="10"
					@scrolltolower="loadMore(3)"
					:style="'calc(' + navHeight + 'px + 100rpx)'"
					v-if="active === 3"
				>
					<view class="content3-body">
						<view
							v-for="(item, index) in dataFormDetailList"
							:key="index"
							class="pt20 pb20 pl20 pr20 mt20 mb20 ml20 mr20 backf border-r-10"
							@click="clickOnFillRecordDetail(item)"
						>
							<view class="mb-20 g3 fwb f30">
								{{ item.name }}
							</view>
							<view class="mt10 info-color f24"
								>共收集{{ item.submitCount }}份</view
							>
							<view class="mt10 mb20 info-color f24"
								>有效{{ item.achieveCount }}份, 其中确认中{{
									item.processingCount
								}}份, 作废中{{ item.invalidingCount }}份, 无效{{
									item.invalidCount
								}}份</view
							>
							<view
								class="primary-color bd-top-e pt20 text-center"
								>查看</view
							>
						</view>
						<diy-empty
							v-if="dataFormDetailList.length === 0"
						></diy-empty>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import diyNavTab from '@/components/diy-navTab/diy-navTab.vue'
import diyEmpty from '@/components/diy-empty/diy-empty.vue'
import serachButton from '@/components/serach-button/serach-button.vue'
export default {
	components: {
		diyNavTab,
		diyEmpty,
		serachButton,
	},
	props: {
		tab: {
			type: String,
			default: '1',
		},
	},
	data() {
		return {
			navHeight: 60,
			active: 1,
			tabList: [
				{ value: 1, text: '全部表单' },
				{ value: 2, text: '填写记录' },
				{ value: 3, text: '详细数据' },
			],
			currentPage1: 1,
			pageNoMore1: false,
			currentPage2: 1,
			pageNoMore2: false,
			currentPage3: 1,
			pageNoMore3: false,
			dataAllformList: [],
			dataFillRecordList: [],
			dataFormDetailList: [],
		}
	},
	mounted() {
		this.navHeight = uni.getStorageSync('navHeight')
		console.log('this.navHeight:', this.navHeight)
	},
	onLoad(query) {
		const tab = Number(query.tab)
		if (tab && tab !== this.active) {
			this.active = tab
		} else {
			this.initData(1)
		}
	},
	watch: {
		active(val) {
			this.initData(val)
		},
	},
	methods: {
		initData(tab) {
			if (tab === 1) {
				this.currentPage1 = 1
				this.pageNoMore1 = false
				this.getAllFormData(this.currentPage1, true)
			} else if (tab === 2) {
				this.currentPage2 = 1
				this.pageNoMore2 = false
				this.getFillRecordData(this.currentPage2, true)
			} else if (tab === 3) {
				this.currentPage3 = 1
				this.pageNoMore3 = false
				this.getFillDetailData(this.currentPage3, '', true)
				// if(this.dataFormDetailList.length === 0){
				// 	this.getFillDetailData()
				// }
			}
		},
		changeTab(value) {
			this.active = Number(value)
			// this.initData(this.active)
		},
		clickOnFormItem(item) {
			// this.$request.request("wflow/wflow/doc/get", {
			//   data: {
			// 	  formKey: item.formKey
			//   },
			// }).then(res => {
			// 	if(res.data && res.data.writable){
			// 		uni.navigateTo({
			// 			url: '/subPackagesForm/pages/fillData/index?id=' + item.id + '&formKey=' + item.formKey + '&mode=preview'
			// 		})
			// 	}else{
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: '该表单无法重复填写'
			// 		})
			// 	}
			// })
			uni.navigateTo({
				url:
					'/subPackagesForm/pages/fillData/index?id=' +
					item.id +
					'&formKey=' +
					item.formKey +
					'&mode=preview',
			})
		},
		clickOnFillRecordItem(item) {
			uni.navigateTo({
				url:
					'/subPackagesForm/pages/fillData/index?id=' +
					item.recordId +
					'&formKey=' +
					item.formKey +
					'&mode=edit',
			})
		},
		clickOnFillRecordDetail(item) {
			uni.navigateTo({
				url:
					'/subPackagesForm/pages/dataDetail/index?formKey=' +
					item.formKey,
			})
		},
		serachInput(val) {
			this.pageNoMore3 = false
			this.getFillDetailData(1, val, true)
		},
		loadMore(tab) {
			if (tab === 1) {
				this.getAllFormData(this.currentPage1 + 1)
			} else if (tab === 2) {
				this.getFillRecordData(this.currentPage2 + 1)
			} else if (tab === 3) {
				this.getFillDetailData(this.currentPage3 + 1)
			}
		},
		getAllFormData(page = 1, isInit = false) {
			if (this.dataAllformList.length > 0 && this.pageNoMore1) {
				return
			}
			this.$request
				.request('wflow/wflow/doc/get-h5-page', {
					data: {
						page,
						pageSize: 20,
					},
				})
				.then((res) => {
					if (res.status === 200) {
						const records =
							(res.data &&
								res.data.records &&
								res.data.records) ||
							[]
						if (records.length < 20) {
							this.pageNoMore1 = true
						}
						this.currentPage1 = page
						if (isInit) {
							this.dataAllformList = []
						}
						this.dataAllformList =
							this.dataAllformList.concat(records)
					}
				})
		},
		getFillRecordData(page = 1, isInit = false) {
			if (this.pageNoMore2) {
				return
			}
			this.$request
				.request('wflow/wflow/doc/get-record-h5-page', {
					data: {
						page,
						pageSize: 10,
					},
					method: 'post',
				})
				.then((res) => {
					if (res.status === 200) {
						const records =
							(res.data &&
								res.data.records &&
								res.data.records) ||
							[]
						if (records.length < 10) {
							this.pageNoMore2 = true
						}
						this.currentPage2 = page
						if (isInit) {
							this.dataFillRecordList = []
						}
						this.dataFillRecordList =
							this.dataFillRecordList.concat(
								records.map((item) => {
									const {
										processStatusName,
										assigneeList = [],
									} = item
									// console.log('processStatusNamesss:', processStatusName, assigneeList)
									// let processStatusNameTrans = processStatusName
									// if(processStatusName === 'REFUSE'){
									// 	processStatusNameTrans = '被驳回'
									// }else if(processStatusName === 'COMPLETE'){
									// 	processStatusNameTrans = '已完成'
									// }else if(processStatusName === 'CANCEL'){
									// 	processStatusNameTrans = '已撤销'
									// }else if(processStatusName === 'RUNNING'){
									// 	processStatusNameTrans = '处理中~';
									// 	if(assigneeList.length > 0){
									// 		processStatusNameTrans = assigneeList[0] + (assigneeList.length > 1 ? '等' : '') + processStatusNameTrans
									// 	}
									// }
									return {
										...item,
										// processStatusName: processStatusNameTrans
									}
								})
							)
					}
				})
		},
		getFillDetailData(page = 1, nameIn = '', isInit = false) {
			console.log('this.pageNoMore3', this.pageNoMore3)
			if (this.pageNoMore3) {
				return
			}
			this.$request
				.request('wflow/wflow/doc/get-h5-stat-page', {
					data: {
						page,
						pageSize: 10,
						name: nameIn,
					},
					method: 'post',
				})
				.then((res) => {
					if (res.status === 200) {
						if (isInit) {
							this.dataFormDetailList = []
						}
						const records =
							(res.data &&
								res.data.records &&
								res.data.records) ||
							[]
						if (records.length < 10) {
							this.pageNoMore3 = true
						}
						this.currentPage3 = page
						this.dataFormDetailList =
							this.dataFormDetailList.concat(records)
						console.log(
							'this.dataFillRecordList',
							this.dataFormDetailList.length
						)
					}
				})
		},
	},
}
</script>

<style lang="scss">
.full-container {
	min-height: 100vh;
	background-color: #fff;
}
.container {
	flex-flow: wrap;
	text-align: center;
	background-color: #fff;
}
.tab-line-box {
	border-bottom: 1px solid #eaeaea;
}
.top-fix {
	background: #fff;
	position: fixed;
	z-index: 99;
	top: calc(60px + 100rpx);
	left: 0;
	width: 100%;
	height: 70rpx;
	padding: 20rpx 0;
}
.sp-line {
	height: 1px;
}
.item {
	flex: none;
	width: 45%;
	background-color: #fff;
}
.pic {
	// width: 100%;
	height: 150rpx;
	border: 1px solid #eaeaea;
	margin: 5rpx 10rpx;
	padding: 3rpx 10rpx;
	border-radius: 2px;
	background-color: rgba(58, 155, 255, 0.1);
	.label {
		color: #999;
		font-size: 24rpx;
	}
}
.content {
	height: calc(100vh - 255rpx);
	background-color: #f5f6f7;
}
.content2 {
	background-color: #f5f6f7;
	padding-bottom: 20rpx;
}
.content3 {
	background-color: #f5f6f7;
	.content3-body {
		padding-top: 100rpx;
		padding-bottom: 20rpx;
		background: #f5f6f7;
	}
}
.empty-bd {
	margin: 0 auto;
}
.record-title {
	max-width: 590rpx;
}
</style>
